<template>
  <div id="index">
    <Head />
    <div class="content">
      <div @click="guide">
        <span class="te">智能引导</span>
        <span class="chat-button">🤖</span>
      </div>
      <div class="left">
        <ul>
          <li style="font-weight: bold">
            分类
            <span
              style="background-color: #3776da; color: #fff; border-radius: 5px"
              >NEW</span
            >
          </li>
          <li
            @click="selectRouter(item.name)"
            v-for="item in categoryList"
            :key="item.id"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="center">
        <div class="center_container">
          <div class="main">
            <el-carousel height="446px" style="border-radius: 15px">
              <el-carousel-item v-for="item in responseImage" :key="item.id">
                <el-image
                  style="width: 700px; height: 446px; border-radius: 15px"
                  :src="item.imgSrc"
                  :id="item.id"
                ></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right_container">
          <div class="top">
            <div class="img">
              <el-image
                style="width: 80px; height: 80px; border-radius: 100px"
                :src="userUrl"
                @click="routerLogin"
              ></el-image>
            </div>
            <span>{{ weclome }}</span>
            <div class="login">
              <el-button
                type="primary"
                size="small"
                @click="login"
                v-show="isvisible"
                >登录</el-button
              >
              <el-button
                type="primary"
                size="small"
                v-show="isvisible"
                @click="login"
                >注册</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="login"
                class="logout"
                v-show="isnotvisible"
                style="padding-left: 19px"
                >退出登录</el-button
              >
            </div>
          </div>
          <div class="r_center">
            <button class="module-btn" @click="goTo('upload')">
              <i class="iconfont icon-upload"></i>
              课程上传
            </button>
            <button class="module-btn" @click="goTo('guide')">
              <i class="iconfont icon-guide"></i>
              智能引导
            </button>
            <button class="module-btn" @click="goTo('profile')">
              <i class="iconfont icon-user"></i>
              个人中心
            </button>
            <button class="module-btn" @click="goTo('recommend')">
              <i class="iconfont icon-recommend"></i>
              内容推荐
            </button>
          </div>
        </div>
      </div>
    </div>

      <div class="center_body">
        <div class="guess_like">猜你喜欢</div>
        <div class="product_detail">
          <div
            class="product_show"
            v-for="item in responseAll"
            :key="item.id"
            @click="selectDetail(item.id)"
          >
            <div
              class="show_img"
              @mouseover="hoverIndex = item.id"
              @mouseleave="hoverIndex = null"
            >
              <img
                referrerpolicy="no-referrer"
                :src="item.coverImage"
                class="image"
                :class="{ 'zoom-in': hoverIndex === item.id }"
              />
              <div v-if="hoverIndex === item.id" class="play-button">▶</div>
            </div>
            <div class="title">
              {{ item.description }}
            </div>
            <div class="last">
              <span><i class="el-icon-user-solid"></i></span>
              <span @click="routerUser(1)">说了一半的话</span>
              <span>{{ item.createTime }}</span>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Head from "@/components/head.vue";
import router from "@/router";
export default {
  name: "indexView",
  components: {
    Head,
  },

  data() {
    return {
      hoverIndex: null,
      responseImage: [
        {
          id: 1,
          imgSrc:
            "http://localhost:8585/uploads/00b63f2e58e1b82a91bb4c86895623f2.jpg",
            //  "http://121.40.59.140:8585/uploads/00b63f2e58e1b82a91bb4c86895623f2.jpg",
        },
        {
          id: 2,
          imgSrc:
            "http://localhost:8585/uploads/1_ff0330b33d5047b69d37babf7ce75719.jpg",
            // "http://121.40.59.140:8585/uploads/1_ff0330b33d5047b69d37babf7ce75719.jpg",
        },
        {
          id: 3,
          imgSrc: "http://localhost:8585/uploads/90.jpg",
          // imgSrc: "http://121.40.59.140:8585/uploads/90.jpg",
        },
        {
          id: 4,
          imgSrc: "http://localhost:8585/uploads/R.jpg",
          // imgSrc: "http://121.40.59.140:8585/uploads/R.jpg",
        },
      ],
      reponseImgAndPrice: [],
      responseAll: [],
      isvisible: true,
      isnotvisible: false,
      weclome: "Hi!欢迎来到Titk购物",
      pageNum: 1, // 当前页码
      isLoading: false, // 是否正在加载数据
      userUrl:
        "https://ts1.cn.mm.bing.net/th/id/R-C.b948ed75993ff3605b2b6162a22a6bf9?rik=%2bMXHSX5miHSHWQ&riu=http%3a%2f%2fimg.keaiming.com%2fuploads%2fallimg%2f2020052715%2fcsx14kgpsxi.jpeg&ehk=tXnpd%2bBneBx%2fLlDrifP%2fRk2HPifZb3eiQ4fYaiXMUKM%3d&risl=&pid=ImgRaw&r=0",
      categoryList: [], // 分类列表
    };
  },
  methods: {
    routerUser(id) {},
    selectRouter(name) {
      this.$router.push({ path: "/search", query: { key: name } });
    },
    routerLogin() {
      this.$router.push("/detail");
    },

    islogin() {
      if (localStorage.getItem("token") !== null) {
        // 控制登录注册按钮的显示和隐藏
        this.isvisible = false;
        this.isnotvisible = true;
        let url = "/api/sysUser/detail";
        this.$http.get(url).then((res) => {
          if (res.data.code === 200) {
            this.weclome = "Hi!" + res.data.data.username;
            if (res.data.data.avatar.includes("https")) {
              this.userUrl = res.data.data.avatar;
            } else {
              this.userUrl =
                "http://localhost:8585/uploads/" + res.data.data.avatar;
                // "http://121.40.59.140:8585/uploads/" + res.data.data.avatar;

            }
            console.log(this.userUrl);
          }
        });
      }
    },

    // 获取全部商品
    getAllProduct() {
      let url = "/api/recommend/list";
      this.$http.get(url).then((res) => {
        this.responseAll = res.data.data;
        console.log(res.data);
      });
    },
  
    // 跳转到商品详情页
    selectDetail(id) {
      this.$router.push({
        path: "/play",
        query: {
          resourcesId: id,
        },
      });
      //添加到历史记录
      let url = "/api/resources/views/insert";
      this.$http.post(url, { resourcesId: id }).then((res) => {
        if (res.data.code === 200) {
          console.log("添加成功");
        } else {
          console.log("添加失败");
        }
      });
    },

    login() {
      this.$router.push("/login");
    },

    // 获取全部类
    getAllCategory() {
      let url = "/api/resources/sort/list?pageNum=1&pageSize=8";
      this.$http.get(url).then((res) => {
        this.categoryList = res.data.rows;
        console.log(res.data.rows);
      });
    },

    // 跳转到智能引导界面
    guide() {
      this.$router.push("/guide");
    },

    // 跳转到指定页面
    goTo(page) {
      const routes = {
        upload: "/upload",
        guide: "/guide",
        profile: "/profile",
        recommend: "/recommend",
      };
      this.$router.push(routes[page]);
    },
  },

  mounted() {
    this.getAllCategory();
    this.islogin();
    this.getAllProduct();
  },
};
</script>

<style lang="less" scoped>
#index {
  .content {
    width: 1200px;
    margin: 5px auto;
    border-radius: 15px;
    height: 490px;
    background-color: #fff;

    .left {
      width: 200px;
      height: 490px;
      float: left;

      ul {
        padding-left: 0%;
        width: 160px;
        background-color: #f3f6f8;
        margin: 20px;
        border-radius: 15px;
        li {
          width: 160px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          cursor: pointer;
        }
        li {
          &:hover {
            color: #3776da;
          }
        }

        li.active {
          color: #3776da;
        }
      }
    }
    .center {
      width: 720px;
      height: 450px;
      float: left;

      .center_container {
        width: 700px;
        height: 450px;
        border-radius: 15px;
        margin: 20px 0;
        margin-right: 20px;
        .main {
          width: 700px;
          height: 380px;
          .main_left {
            float: left;
            width: 280px;
            height: 380px;
            border-radius: 15px;
            margin: 20px 0;
            margin-right: 27px;
          }
          .main_center {
            float: left;
            width: 280px;
            height: 380px;
            border-radius: 15px;
            margin: 20px 0;
            margin-right: 27px;
            background-color: #f3f6f8;
            .top {
              width: 280px;
              height: 180px;
              border-radius: 15px;
            }

            .bottom {
              width: 280px;
              height: 180px;
              border-radius: 15px;
              margin-top: 20px;

              .b_left {
                width: 130px;
                height: 180px;
                border-radius: 15px;
                float: left;
                margin-right: 20px;
              }
              .b_right {
                width: 130px;
                height: 180px;
                border-radius: 15px;
                float: left;
              }
            }
          }
          .main_right {
            float: left;
            width: 280px;
            height: 380px;
            border-radius: 15px;
            margin: 20px 0;

            .r_top {
              width: 280px;
              height: 180px;
              border-radius: 15px;
            }

            .r_bootom {
              width: 280px;
              height: 180px;
              border-radius: 15px;
              margin-top: 20px;
            }
          }
        }
      }
    }

    .right {
      width: 280px;
      height: 450px;
      float: left;
      border-radius: 15px;

      .right_container {
        width: 280px;
        height: 450px;
        border-radius: 15px;
        margin: 20px 0;
        background-color: #f3f6f8;

        .top {
          width: 280px;
          height: 180px;
          border-radius: 15px;
          margin-bottom: 20px;

          .img {
            margin-left: 100px;
          }
          span {
            display: block;
            margin-top: 5px;
            font-size: 13px;
            text-align: center;
          }
          .login {
            margin: 20px auto;
            padding-left: 77px;

            el-button {
              width: 120px;
              margin-left: 80px;
            }
          }
        }

        .center {
          width: 280px;
          height: 250px;
          border-radius: 15px;

          .rec {
            width: 260px;
            height: 50px;
            margin-right: 20px;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            background-color: #f3f6f8;
            border-radius: 15px;
          }

          .content {
            width: 260px;
            height: 160px;
            margin-top: 20px;
            .block {
              width: 260px;
              height: 160px;
            }
          }
        }
      }
    }
  }
  .center_body {
    width: 1400px;
    margin: 20px auto;
    margin-left: 165px;
    border-radius: 15px;
  }

  .guess_like {
    width: 260px;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
  }

  .product_detail {
    // width: 1230px;
    // background-color: #fff;
    margin-top: 20px;
  }

  .product_show {
    width: 286px;
    float: left;
    margin-right: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    transition: transform 0.2s ease-in-out;
    position: relative;
  }

  .show_img {
    width: 286px;
    height: 210px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
  }

  .image {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
  }

  .zoom-in {
    transform: scale(1.1);
  }

  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 24px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.title {
  width: 287px;
  max-height: 48px; /* 设置最大高度来控制行数，2行的高度 */
  line-height: 24px; /* 设置行高 */
  text-align: left;
  color: #11192d;
  display: -webkit-box; /* 使元素成为伸缩盒模型 */
  font-size: 16px;
  font-weight: 600;
  margin: 8px;
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 省略号 */
  -webkit-line-clamp: 2; /* 设置最多显示2行 */
  -webkit-box-orient: vertical; /* 设置伸缩方向为垂直 */
}
.te {
  position: absolute;
  top: 42px;
  right: 26px;
  font-size: 20px;
  color: #3776da;
  font-weight: bold;
  margin-left: 20px;
}
.chat-button {
  font-size: 100px;
  position: absolute;
  right: -7px;
  top: 60px;
  cursor: pointer;
  animation: floating 3s infinite ease-in-out;
  cursor: pointer;
  outline: none; /* 取消默认的点击轮廓 */
  border: none; /* 取消默认的边框 */
}

@keyframes floating {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.r_center {
  width: 280px;
  display: flex;
  flex-direction: column; /* 让按钮一行一个 */
  align-items: center;
  gap: 12px;
  margin: 20px auto;
}

.module-btn {
  width: 90%;
  height: 50px;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.module-btn:hover {
  transform: scale(1.05);
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.3);
}

.module-btn i {
  font-size: 20px;
}
.product_detail {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* 卡片之间的间距 */
  justify-content: flex-start;
}
.product_show {
  width: 300px; /* 统一宽度 */
  min-height: 300px; /* 或者根据内容动态增加 */
  box-sizing: border-box;
  border: 1px solid #eee;
  border-radius: 8px;
}
.show_img img {
  width: 100%;
  height: 180px;
  object-fit: cover; /* 防止图片比例失调 */
}

</style>